"use client"

import { BlogHeader } from "@/components/blog-header"
import { BlogFooter } from "@/components/blog-footer"
import { BlogPostCard } from "@/components/blog-post-card"
import { TagList } from "@/components/tag-list"
import { getAllPosts, getAllTags, getPostsByTag } from "@/lib/blog"
import { useState, useEffect } from "react"
import { useSearchParams } from "next/navigation"

export default function BlogPage() {
  const [allPosts, setAllPosts] = useState(getAllPosts())
  const [filteredPosts, setFilteredPosts] = useState(getAllPosts())
  const [selectedTag, setSelectedTag] = useState<string | null>(null)
  const allTags = getAllTags()
  const searchParams = useSearchParams()

  useEffect(() => {
    const tagParam = searchParams.get("tag")
    if (tagParam) {
      setSelectedTag(tagParam)
      setFilteredPosts(getPostsByTag(tagParam))
    } else {
      setSelectedTag(null)
      setFilteredPosts(allPosts)
    }
  }, [searchParams, allPosts])

  const handleTagClick = (tag: string) => {
    if (selectedTag === tag) {
      setSelectedTag(null)
      setFilteredPosts(allPosts)
      window.history.pushState({}, "", "/blog")
    } else {
      setSelectedTag(tag)
      setFilteredPosts(getPostsByTag(tag))
      window.history.pushState({}, "", `/blog?tag=${encodeURIComponent(tag)}`)
    }
  }

  const clearFilter = () => {
    setSelectedTag(null)
    setFilteredPosts(allPosts)
    window.history.pushState({}, "", "/blog")
  }

  return (
    <div className="min-h-screen flex flex-col">
      <BlogHeader />

      <main className="flex-1 py-12 px-4">
        <div className="container">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">所有文章</h1>
            <p className="text-muted-foreground text-lg">关于技术、设计和生活的思考、教程和见解</p>
          </div>

          <div className="mb-8">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold">按标签筛选</h2>
              {selectedTag && (
                <button
                  onClick={clearFilter}
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                >
                  清除筛选
                </button>
              )}
            </div>
            <TagList tags={allTags} selectedTag={selectedTag || undefined} onTagClick={handleTagClick} />
          </div>

          {selectedTag && (
            <div className="mb-6 p-4 bg-muted rounded-lg">
              <p className="text-sm text-muted-foreground">
                显示标签为 "<span className="font-medium text-foreground">{selectedTag}</span>" 的文章 (
                {filteredPosts.length} 篇)
              </p>
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredPosts.map((post) => (
              <BlogPostCard key={post.slug} {...post} />
            ))}
          </div>

          {filteredPosts.length === 0 && (
            <div className="text-center py-12">
              <p className="text-muted-foreground">没有找到相关文章</p>
            </div>
          )}
        </div>
      </main>

      <BlogFooter />
    </div>
  )
}
